<template>
	<view class="viewer">
		<image src="https://zhzx.on-line-demo.com/bg/bg.png" mode="aspectFill" style="width: 100%;height: 100%;">
		</image>
		<view class="content">
			<image src="https://zhzx.on-line-demo.com/image/login-logo.png" mode="heightFix" class="logo"></image>
			<text class="title">澄迈县智慧政协</text>
			<form>
				<view class="uni-form-item uni-column username">
					<input class="uni-input" v-model="account" name="input" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column password">
					<input class="uni-input" v-model="code" name="input" placeholder="请输入验证码" />
					<button class="code" @click="getCode()" :disabled="seconds != 60">
						<label v-if="seconds == 60">发送验证码</label>
						<label v-else>{{ seconds }}秒</label>
					</button>
				</view>
				<view class="uni-btn-v">
					<button class="btn box-shadow" @click="login()">登录</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import request from '../common/request.js'
	import md5 from '../common/md5.js'
	import sha1 from '../common/sha1.js'
	export default {
		data() {
			return {
				account: '',
				code: '',
				seconds: 60
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 随机字符串16位
			 */
			createNonceStr() {
				let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
					'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
					'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
					'x', 'y', 'z'
				];
				let strs = "";
				for (let i = 0; i < 16; i++) {
					let id = parseInt(Math.random() * 61);
					strs += chars[id];
				}
				return strs;
			},
			sortASCII(obj,isSort) {
				let arr = []
				Object.keys(obj).forEach(item => arr.push(item))
				let sortArr = isSort ? arr.sort() : arr.sort().reverse()
				let sortObj = {}
				for (let i in sortArr) {
					sortObj[sortArr[i]] = obj[sortArr[i]]
				}
				return sortObj
			},
			countdown() {
			  if (this.seconds > 0) {
			    this.seconds--;
			    setTimeout(this.countdown, 1000);
			  } else {
			    this.seconds = 60
			  }
			},
			getCode() {
				if (!this.account) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				var reg = /^1[3-9]\d{9}$/;
				var isValid = reg.test(this.account);
				if (!isValid) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				this.countdown()
				let randomStr = this.createNonceStr()
				let timeStamp = Math.round(new Date().getTime()/1000).toString()
				// 参数 ASCII排序
				let obj = {
					phone: this.account,
					timeStamp: timeStamp,
					randomStr: randomStr
				}
				let objs = this.sortASCII(obj,true)
				// 拼接
				let str = ''
				Object.keys(objs).forEach(key => {
					str += `&${key}=${objs[key]}`
				})
				// 添加key值
				str += '&key=hncmzx@20070329#'
				// 加密转大写
				let signature = str.substr(1)
				obj.signature = md5(sha1(signature)).toUpperCase()
				request({
					url: '/user/smsLogin',
					data: obj,
					method: 'POST',
				}).then(res => {
					if(res.code != 1){
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			login() {
				if (!this.account || !this.code) {
					uni.showToast({
						title: '请输入手机号和验证码',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				request({
					url: '/user/dxLogin',
					data: {
						account: this.account,
						code: this.code
					},
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('userInfo', res.data.userinfo)
						uni.redirectTo({
							url: '/pages/index'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.viewer {
		height: 100vh;
		overflow-y: auto;
	}

	.content {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		z-index: 2;
	}

	.logo {
		height: 80px;
		display: block;
		margin: 0px auto;
	}

	.title {
		color: #175890;
		font-size: 26px;
		text-align: center;
		display: block;
		font-weight: bold;
		margin-top: 20px;
		-webkit-text-stroke: 1px rgba(255, 255, 255, 0.67);
	}

	.uni-column {
		width: calc(100% - 60px);
		margin: 30px auto;
		position: relative;
	}

	.username .uni-input {
		background: url(https://zhzx.on-line-demo.com/image/ren.png) 30px center no-repeat;
		background-size: 20px;
		padding-left: 90px;
		color: #fff;
	}

	.password .uni-input {
		background: url(https://zhzx.on-line-demo.com/image/mima.png) 30px center no-repeat;
		background-size: 20px;
		padding-left: 90px;
		color: #fff;
	}

	.uni-input {
		height: 32px;
		line-height: 32px;
		border-bottom: 1px solid #c9c9c9;
	}

	::v-deep .input-placeholder {
		color: rgba(255, 255, 255, 0.45);
	}

	.password {
		display: flex;
		align-items: center;
	}

	.code {
		background-color: #2668be;
		color: #fff;
		border-radius: 5px;
		font-size: 14px;
		flex-shrink: 1;
		width: 120px;
		padding: 0px;
		margin-left: 10px;
		text-align: center;
		line-height: 34px;
	}

	.btn {
		width: calc(100% - 60px);
		background-color: #2668be;
		color: #fff;
		border-radius: 15px;
		line-height: 60px;
		margin-top: 50px;
	}
</style>